<template>
  <div class="about">
    <div class="wrap">
      <div class="add">
        <input type="text" v-model="title" />
        <button @click="add">添加</button>
      </div>

      <div class="con">
        <ul class="nav">
          <li
            v-for="(item, index) in cate"
            :key="index"
            @click="change(index)"
            :class="{ active: flag == index }"
          >
            {{ item }}
          </li>
        </ul>
        <ul class="list">
          <div class="header">
            <h4>正在看的{{ cate[flag] }}</h4>
            <span @click="sorttime">时间排序</span>
          </div>
          <li
            v-for="(item, index) in list"
            :key="index"
            v-show="item.cate == flag"
          >
            <input
              type="text"
              v-if="index == editindex"
              v-model="item.title"
              @keydown.enter="update(item.title)"
            />
            <span @dblclick="edit(index)" v-else>{{ item.title }}</span>

            <span class="time">{{ item.time | filtime }}</span>
            <span class="remove" @click="remove(index)">删除</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: 0,
      cate: ["书籍", "电影", "综艺", "体育", "游戏"],
      list: [
        {
          title: "银色仙人掌",
          time: new Date(),
          cate: 0,
        },
        {
          title: "烈火英雄",
          time: new Date(),
          cate: 1,
        },
        {
          title: "演员请就位",
          time: new Date(),
          cate: 2,
        },
        {
          title: "nba",
          time: new Date(),
          cate: 3,
        },
        {
          title: "王者荣耀",
          time: new Date(),
          cate: 4,
        },
      ],
      //整个列表的数据
      title: "",
      editindex: -1,
    };
  },
  mounted() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
  },
  methods: {
    change(index) {
      this.flag = index;
    },
    add() {
      if (this.title == "") {
        alert("不能输入为空");
        return false;
      }
      //判空

      let arr = this.list.filter((item) => {
        return item.title == this.title;
      });

      if (arr.length != 0) {
        alert("不能重复添加");
        return false;
      }
      //判重 逻辑是筛选数据中有没有跟刚输的title一样的值，如果有，筛选出来的数组的长度就不为0

      this.list.push({ title: this.title, cate: this.flag, time: new Date() });
      this.title = "";
    },
    remove(index) {
      this.list.splice(index, 1);
    },
    edit(index) {
      this.editindex = index;
    },
    update(title) {
      if (title == "") {
        alert("不能为空");
        return false;
      }
      //判断修改的内容是否为空

      this.editindex = -1;
    },
    sorttime() {
      this.list.sort((a, b) => {
        return b.time - a.time;
      });
    },
    // 时间排序
  },
  watch: {
    list: {
      handler(newval) {
        localStorage.setItem("list", JSON.stringify(this.list));
      },
      deep: true,
    },
  },
  //本地存储刷新不掉
};
</script>
<style lang="scss">
.wrap {
  width: 800px;
  margin: 50px auto;
  background: rgba($color: #000000, $alpha: 0.1);
  padding: 30px;
  box-sizing: border-box;
  .add {
    text-align: center;
    input {
      width: 300px;
      height: 30px;
      margin-right: 50px;
      box-sizing: border-box;
    }
    button {
      height: 30px;
    }
  }
  .con {
    margin-top: 50px;
    .nav {
      display: flex;
      li {
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: green;
      }
      li.active {
        background: burlywood;
        color: #fff;
      }
    }
    .list {
      width: 500px;
      border: 1px solid #000;
      height: 400px;
      box-sizing: border-box;
      .header {
        display: flex;
        justify-content: space-between;
        color: royalblue;
      }
      li {
        height: 30px;
        line-height: 30px;
        padding-left: 50px;
        box-sizing: border-box;
        width: 100%;

        .remove {
          display: none;
          margin-left: 100px;
        }
        .time {
          margin-left: 30px;
        }
      }
      li:hover {
        background: olive;
        .remove {
          display: inline-block;
        }
      }
    }
  }
}
</style>
